<template>
  <div class="h-form">
    <div id="hinput" class="h-input-default">
      <label :class="showClass" v-show="status">名称</label>
      <el-input
        @focus="input_focus"
        @blur="input_blur"
        :placeholder="placeholderText"
        v-model="name"
        clearable
        size="mini"
      ></el-input>
      <div class="liuh-input-bottom-line-parent">
        <div class="liuh-input-bottom-line-child" :class="lineStyle"></div>
      </div>
    </div>
    <div id="hselect" class="h-select-default">
      <label :class="showClass1" v-show="status1">类型</label>
      <el-select
        :placeholder="placeholderText1"
        @focus="select_focus1"
        @blur="select_blur1"
        size="mini"
        v-model="type"
      >
        <el-option
          v-for="item in sceneList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="liuh-select-bottom-line-parent">
        <div class="liuh-select-bottom-line-child" :class="lineStyle1"></div>
      </div>
    </div>
    <div id="hselect" class="h-select-default" v-show="type=='camera'">
      <label :class="showClass2" v-show="status2">设备</label>
      <el-select
        :placeholder="placeholderText2"
        @focus="select_focus2"
        @blur="select_blur2"
        size="mini"
        v-model="subCode"
      >
        <el-option
          v-for="item in cameraOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="liuh-select-bottom-line-parent">
        <div class="liuh-select-bottom-line-child" :class="lineStyle2"></div>
      </div>
    </div>
    <div class="btns">
      <el-button plain size="mini" type="primary" @click="add">新增</el-button>
      <el-button plain size="mini" type="info" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "hForm",
  props: {},
  data() {
    return {
      lineStyle: "",
      status: false,
      showClass: "",
      placeholderText: "名称",
      name: "",
      type: "",
      subCode: "",
      lineStyle1: "",
      showClass1: "",
      placeholderText1: "类型",
      status1: false,
      lineStyle2: "",
      showClass2: "",
      placeholderText2: "设备",
      status2: false,
      sceneList: [
        { value: 'camera', label: '摄像头' },
        { value: 'build', label: '商场' },
        { value: 'warehouse', label: '仓库' },
        { value: 'square', label: '广场' },
        { value: 'residence', label: '住宅' }
      ]
    };
  },
  computed: {
    ...mapGetters({
      cameraOptions: "getMenuOptions"
    })
  },
  created() {},
  methods: {
    add() {
      this.$emit("add", {
        name: this.name,
        type: this.type,
        subCode: this.subCode
      });
      this.name = "";
      this.type = "";
      this.subCode = "";
      this.select_blur1();
      this.select_blur2();
      this.input_blur();
    },
    cancel() {
      this.$emit("cancel");
      this.name = "";
      this.type = "";
      this.subCode = "";
      this.select_blur1();
      this.select_blur2();
      this.input_blur();
    },
    input_focus() {
      if (this.name === "" || typeof this.name === "undefined") {
        this.status = true;
        this.placeholderText = "";
        this.showClass = "liuh-label liuh-label-show";
      }
      this.lineStyle = "liuh-line-show";
    },
    input_blur() {
      if (this.name == "" || typeof this.name === "undefined") {
        setTimeout(() => {
          this.status = false;
          this.placeholderText = "名称";
        }, 580);
        this.showClass = "liuh-label liuh-label-hide";
      }
      this.lineStyle = "liuh-line-hide";
    },
    select_focus1(e) {
      this.status1 = true;
      this.placeholderText1 = "";
      this.showClass1 = "liuh-label liuh-label-show";
      this.lineStyle1 = "liuh-line-show";
    },
    select_blur1() {
      if (this.type === "") {
        setTimeout(() => {
          this.status1 = false;
          this.placeholderText1 = "类型";
        }, 580);
        this.showClass1 = "liuh-label liuh-label-hide";
      }
      this.lineStyle1 = "liuh-line-hide";
    },
    select_focus2(e) {
      this.status2 = true;
      this.placeholderText2 = "";
      this.showClass2 = "liuh-label liuh-label-show";
      this.lineStyle2 = "liuh-line-show";
    },
    select_blur2() {
      if (this.subCode === "") {
        setTimeout(() => {
          this.status2 = false;
          this.placeholderText2 = "设备";
        }, 580);
        this.showClass2 = "liuh-label liuh-label-hide";
      }
      this.lineStyle2 = "liuh-line-hide";
    }
  }
};
</script>

<style lang="less">
.btns {
  .el-button--primary.is-plain {
    box-shadow: 0px 1px 8px 4px #409eff inset;
    color: #fff;
    border: none;
    background: transparent;
  }
  .el-button--info.is-plain {
    box-shadow: 0px 1px 8px 4px #909399 inset;
    color: #fff;
    border: none;
    background: transparent;
  }
}

#hinput {
  position: relative;
  margin: 20px;
  font-family: SimHei;

  .liuh-input-bottom-line-child {
    width: 100%;
    height: 2px;
    float: left;
    position: absolute;
  }
  .liuh-input-bottom-line-parent {
    width: 100%;
    height: 1px;
    background-color: rgb(223, 211, 211);
    width: 100%;
    float: left;
    position: relative;
  }
}
.h-input-default {
  .liuh-label {
    position: absolute;
    top: -9px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    font-size: 12px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-primary {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #409eff;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-success {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #67c23a;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-succ 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-succ 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #67c23a;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #67c23a;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #67c23a;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #67c23a;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-danger {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #f56c6c;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-danger 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-danger 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #f56c6c;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #f56c6c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #f56c6c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #f56c6c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-warning {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #e6a23c;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-warn 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-warn 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #e6a23c;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #e6a23c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #e6a23c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #e6a23c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
@keyframes show-pass {
  0% {
    transform: translate3d(30px, 13px, 0);
  }
  100% {
    transform: translate3d(6px, 4px, 0);
  }
}
@keyframes hide-pass {
  0% {
    transform: translate3d(6px, 4px, 0);
  }
  100% {
    transform: translate3d(30px, 13px, 0);
  }
}
@keyframes line-show-succ {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: rgb(23, 192, 93);
  }
}
@keyframes line-hide-succ {
  0% {
    left: 0;
    width: 100%;
    background-color: rgb(23, 192, 93);
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
@keyframes line-show-warn {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: #e6a23c;
  }
}
@keyframes line-hide-warn {
  0% {
    left: 0;
    width: 100%;
    background-color: #e6a23c;
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
@keyframes line-show-danger {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: #f56c6c;
  }
}
@keyframes line-hide-danger {
  0% {
    left: 0;
    width: 100%;
    background-color: #f56c6c;
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
@keyframes line-show-primary {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: #409eff;
  }
}
@keyframes line-hide-primary {
  0% {
    left: 0;
    width: 100%;
    background-color: #409eff;
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
#hselect {
  position: relative;
  margin: 20px;
  font-family: SimHei;
  .liuh-select-bottom-line-child {
    width: 100%;
    height: 2px;
    float: left;
    position: absolute;
  }
  .liuh-select-bottom-line-parent {
    width: 100%;
    height: 1px;
    background-color: rgb(223, 211, 211);
    width: 100%;
    float: left;
    position: relative;
  }
  .el-select {
    width: 100%;
  }
}
.h-select-default {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: h-select-show-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-label-hide {
    animation: h-select-hide-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    font-size: 12px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-select-primary {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #409eff;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: h-select-show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: h-select-hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #409eff;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
@keyframes h-select-show-pass {
  0% {
    transform: translate3d(30px, 19px, 0);
  }
  100% {
    transform: translate3d(6px, 6px, 0);
  }
}
@keyframes h-select-hide-pass {
  0% {
    transform: translate3d(6px, 6px, 0);
  }
  100% {
    transform: translate3d(30px, 19px, 0);
  }
}
</style>